<template>
  <div class="home">
    <div class="home_container">
      <div class="articles">
        <div
          class="article"
          v-for="article in articleData.list"
          :key="article.id"
          @click="toDetails(article)"
        >
          <div class="category">研学精选</div>
          <div class="info">
            <div class="img">
              <img :src="article.cover" alt />
            </div>
            <div class="introduce">
              <div class="title">{{article.title}}</div>
              <div>{{article.publishTime | fmtDate}}</div>
              <div class="content">
                <strong>作者：</strong>
                {{article.baseUser?article.baseUser.realname:"匿名"}}
              </div>
              <!-- <div>{{article.status}}</div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="notices">
        <div class="title">项目优选</div>
        <ul class="projects">
          <li
            class="project"
            v-for="project in projectData.list"
            :key="project.id"
            @click="toProjectDetails(project)"
          >{{project.title}}</li>
        </ul>
      </div>
    </div>
    <!-- 项目详情 -->
    <el-dialog title="研学项目" :visible.sync="visible_project" width="80%" class="customer_modal">
      <div v-html="project.content"></div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible_project = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- /项目详情 -->
  </div>
</template>
<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      param: {
        page: 1,
        pageSize: 15,
        status: "审核通过",
      },
      articleData: { list: [] },
      projectData: { list: [] },
      loading: false,
      visible_project: false,
      project: {},
    };
  },
  created() {
    this.loadArticles();
    this.loadProjects();
  },
  methods: {
    toProjectDetails(row) {
      this.project = row;
      this.visible_project = true;
    },
    // 跳转到详情页面
    toDetails(article) {
      this.$router.push({
        path: "/info/article/Details",
        query: article,
      });
    },
    loadArticles() {
      this.param.status = "审核通过";
      get("/article/pageQuery", this.param).then((response) => {
        this.articleData = response.data;
      });
    },
    // 查询
    loadProjects() {
      let url = "/article/pageQuery";
      get(url, { page: 1, pageSize: 10, status: "审核通过" }).then(
        (response) => {
          this.projectData = response.data;
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  background-color: #f3f3f9;
  margin: -0.5em;
  padding: 0.5em;

  .home_container {
    min-height: 1000px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    font-size: 14px;
    color: #666;
    & > div.articles {
      flex: 1;

      .article {
        background-color: #ffffff;
        margin-bottom: 1em;
        padding: 1em;
        border-radius: 5px;
        cursor: pointer;
        .category {
          font-size: 16px;
          font-weight: bold;
          line-height: 2em;
        }
        // 信息
        .info {
          display: flex;
          .img {
            flex-basis: 180px;
            img {
              width: 100%;
            }
          }
          .introduce {
            flex: 1;
            padding: 0 1em;
            .title {
              font-weight: bold;
              line-height: 2em;
            }
            .content {
              padding: 1em 0;
            }
          }
        }
      }
      .other {
        line-height: 2em;
      }
    }
    & > div.notices {
      margin-left: 1em;
      padding: 0.5em 1em;
      flex-basis: 320px;
      background-color: #ffffff;

      .title {
        font-size: 16px;
        font-weight: bold;
        line-height: 2em;
      }

      .projects {
        font-size: 12px;
        .project {
          line-height: 2em;
          cursor: pointer;
          border-bottom: 1px solid #f4f4f4;
        }
      }
    }
  }
}
</style>